<template>
    <look :visible.sync="visible" :show="show" :noEsc="false" :width="'30%'" :toBody="toBody"
          @cancel="handleCancel"
          :title="title">
        <div v-if="!noCheck">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
            </el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="checkedList" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="(list,index) in ipLists" :label="list" :key="index">{{list.ip}}</el-checkbox>
            </el-checkbox-group>
        </div>
        <div v-if="noCheck">
            <span v-for="(list,index) in ipLists" :key="index" class="list">{{list.ip}}</span>
        </div>
        <div slot="footer" class="text-center">
            <slot name="footer">
                <el-button type="primary" @click="handleSave" size="small">确 定</el-button>
                <el-button @click="handleCancel" size="small">取 消</el-button>
            </slot>
        </div>
    </look>
</template>

<script>
    import look from '../components/dialog'

    export default {
        name: '',
        props: ['show', 'currentIp', 'ipLists', 'toBody', 'noCheck'],
        data() {
            return {
                visible: this.show,
                checkAll: false,
                checkedList: [],
                allList: [],
                isIndeterminate: true,
                title: null
            }
        },
        watch: {
            show(val) {
                this.visible = this.show
                if (!val) {
                    this.$emit('update:show', false)
                } else {
                    if (this.ipLists[0]) {
                        this.allList = this.ipLists
                        this.checkedList = []
                        this.ipLists.forEach(item => {
                            if (item.checked) this.checkedList.push(item)
                        })
                        if (this.allList.length === this.checkedList.length) {
                            this.isIndeterminate = false
                            this.checkAll = true
                        } else {
                            this.isIndeterminate = true
                            this.checkAll = false
                        }
                    }
                    if (this.currentIp) this.title = this.currentIp.name
                }
            }
        },
        mounted() {
        },
        methods: {
            handleCancel() {
                this.$emit('update:show', false)
                this.$emit('cancel')
            },
            handleSave() {
                this.$emit('save', this.checkedList)
            },
            handleCheckAllChange(val) {
                this.checkedList = val ? this.allList : []
                this.isIndeterminate = false
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length
                this.checkAll = checkedCount === this.ipLists.length
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.ipLists.length
            }
        },
        components: {
            look
        }

    }
</script>

<style scoped lang="less">
    .list {
        margin-right: 30px;
        padding-left: 10px;
        display: inline-block;
    }
</style>
